<!-- 一条动态 -->
<template>
	<view class="list-item">

		<!-- 头部 -->
		<view class="top">
			<view class="headImg" @click="getPreviewImage([pageData.headImg])">
				<image class="image" :src="pageData.headImg" mode="aspectFill"></image>
			</view>

			<view class="top-center">
				<view class="top-center-top">
					<text class="name">{{pageData.name | name}}</text>
					<view class="age">
						<u-icon :name="pageData.sex === 1 ? 'man': 'woman'" color="#fff" size="24rpx"></u-icon>
						<text>{{pageData.age}}</text>
					</view>
				</view>

				<view class="top-center-bottom">
					<text class="height">{{pageData.height}}cm</text>
					<text class="weight">{{pageData.weight}}kg</text>
				</view>
			</view>

			<view class="top-right">
				<view class="text" @click="enterActivity">预约</view>
			</view>

		</view>

		<!-- 中间文字和视频 -->
		<view class="center">
			<text class="remark">{{pageData.content}}</text>


			<!-- 媒体  -->
			<view class="medium">


				<view v-if="pageData.photo.length > 0" class="image">
					<image v-for="(res,index) in pageData.photo" class="imageChild" :src="res" mode="aspectFill"
						@click="getPreviewImage(pageData.photo,index)">
					</image>
				</view>

				<view v-if="pageData.video" class="video">
					<video class="videoChild" id="myVideo" :src="pageData.video" @error="videoErrorCallback"
						@play="videoPlay" :controls="true" :enable-play-gesture="true" :show-center-play-btn="true">
					</video>
				</view>

			</view>

		</view>


		<!-- 底部操作,先不做 -->
		<view class="bottom">
			<view class="left">
				<!-- <view>浏览 1</view> -->
				<view class="del" @click="delItem" v-if="delIsShow">
					<u-icon name="trash-fill" color="#576893" size="28rpx"></u-icon>
				</view>

				<!-- 	<view>
					<u-icon name="rmb-circle"></u-icon>
					<text>打赏</text>
				</view> -->

				<view class="createTime">
					{{pageData.createTime | createTime}}
				</view>
			</view>

			<view class="right" v-if="pageData.distance">
				<uni-icons type="location" size="30rpx" color="#999"></uni-icons>
				<text class="address">{{pageData.distance}}km</text>
			</view>
		</view>


		<!-- 弹出层 -->
		<u-modal :show="show" title="确认删除?" content='确定要删除这条动态吗' :showCancelButton="true" @confirm="modalConfirm"
			@cancel="modalClose" @close="modalClose"></u-modal>

	</view>
</template>

<script>
	// vuex引入
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	// api引入
	import {
		getArtistMomentDelApi, // 删除动态
	} from '@/api/artist.js'

	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},

			/**
			 * 在页面中删除一条动态
			 */
			removeItem: {
				type: Function,
				default: () => {}
			}
		},


		data() {
			return {
				pageData: {}, // 页面数据


				show: false, // 是否显示弹出框

				videoContext: '', // 视频实例
			};
		},
		computed: {
			...mapGetters(['userInfo']),


			/**
			 * 是否显示删除动态
			 */
			delIsShow() {
				if (this.userInfo.id === this.pageData.userId) {
					return true
				} else {
					return false
				}
			},
		},

		mounted: function(res) {
			this.videoContext = uni.createVideoContext('myVideo', this)
			// this.videoContext = wx.createVideoContext('myVideo', this)
		},

		watch: {
			data: {
				handler() {
					if (Object.keys(this.data).length > 0) {
						let item = this.data
						this.pageData = {
							userId: item.userId, // 发布人id

							id: item.id, // 动态id

							headImg: item.avatarUrl, // 头像
							name: item.stageName, // 昵称
							age: item.age, // 年纪
							sex: item.gender, // 性别,1男2女
							height: item.height, // 身高
							weight: item.weight, // 体重
							distance: item.distance, // 距离

							content: item.content, // 文字内容

							photo: item.photo ? JSON.parse(item.photo) : [], // 图片 
							video: item.video, // 视频

							createTime: item.createTime, // 发布时间
							artistId: item.artistId, //艺人id
							isInInterval: item.isInInterval, // 是否在服务期内


						}


						if (this.pageData.photo.length > 1) {
							this.pageData.photo.sort((a, b) => a.sort - b.sort)
						}


						console.log('一条的数据', this.pageData);
					}
				},
				deep: true,
				immediate: true
			}
		},



		filters: {

			name(val) {
				let str = ''
				if (val) {
					str = val
				} else {
					str = '暂无用户名'
				}

				return str;
			},

			// 发布时间
			createTime(val) {
				let time = new Date(val)
				let time2 = new Date - new Date(val) // 发布时间和现在的时间差/毫秒
				let fen = Math.floor(time2 / 1000 / 60) // 差多少分

				let time3 = Math.floor(time2 / (1000 * 60 * 60)) // 小时

				let time4 = Math.floor(time3 / 24) // 多少天
				let time5 = time3 % 24 // 多于多少时

				let str = ''
				let day = 1000 * 60 * 60 * 24 * 1

				if (time2 < (1000 * 60 * 60)) {
					str = fen + '分钟前'
				} else if (time2 < day) {
					str = time3 + '小时前'
				}
				if (time2 > day * 1) {
					str = '昨天'
				}
				if (time2 > day * 2) {
					str = Math.floor(time2 / day) + '天前'
				}

				return str;

			}


		},

		methods: {


			/**
			 * 预览图片
			 */
			getPreviewImage(url, num = 0) {
				let that = this
				// 预览图片
				uni.previewImage({
					urls: url,
					current: num,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg, '100');
						}
					},

					success: res => {
						console.log(res, 'kkk');
					},
					fail(err) {
						console.log(err, '222');
					},
				});
			},




			// 视频的方法
			videoErrorCallback: function(e) {
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: false
				// })
				console.log(e, '视频有错误');

			},



			/**
			 * 删除动态
			 */
			delItem() {
				this.show = true
			},

			/**
			 * 确定删除
			 */
			modalConfirm() {

				// 删除
				this.getArtistMomentDel()

				// 关闭弹窗
				this.modalClose()
			},

			/**
			 * 关闭弹窗
			 */
			modalClose() {
				this.show = false
			},

			/**
			 * 删除动态
			 */
			async getArtistMomentDel() {
				const res = await getArtistMomentDelApi(this.pageData.id)
				if (res.code !== 200) {
					this.$public.showText(res.msg || '删除失败')
					return
				}
				this.$public.showText('删除成功')
				this.$emit('removeItem', this.pageData.id)
			},


			/**
			 * 前往艺人详情
			 */
			enterActivity() {
				uni.navigateTo({
					url: `/pages/artist/info?id=${this.pageData.artistId}&isInInterval=${this.pageData.isInInterval ? '1':'0'}`

				})
			},


			/**
			 * 播放视频
			 */
			videoPlay() {
				console.log('播放视频', this.videoContext);
				this.videoContext.requestFullScreen({
					direction: 0
				})
			},





		}
	}
</script>

<style lang="less" scoped>
	.list-item {
		background-color: #fff;
		border-radius: 24rpx;
		#padding(24rpx);

		.top {
			width: 100;
			#flex(-, -, center);


			.headImg {
				#box(100rpx);

				.image {
					#box(100rpx, 100rpx, 50%);
				}
			}

			.top-center {
				margin-left: 24rpx;

				.top-center-top {
					#flex(-, -, center);

					.name {
						#font(32rpx, #333, 600);
					}

					.age {
						#flex(-, center, center);
						#font(24rpx, #fff);
						#box(100rpx, 40rpx, 100rpx, #EC606F);
						margin-left: 12rpx;
					}
				}

				.top-center-bottom {
					#flex(-, -, center);
					#font(26rpx, #999);
					margin-top: 12rpx;
					gap: 12rpx;

				}



			}



			.top-right {
				flex: 1;
				#flex(-, flex-end, center);

				.text {
					#box(120rpx, 64rpx, 100rpx, #EC606F);
					#font(28rpx, #fff);
					#flex(-, center, center);
				}

			}
		}







		.center {
			margin-top: 24rpx;

			.remark {
				#font(28rpx, #999);
				line-height: 42rpx;
			}


			.medium {
				margin-top: 24rpx;

				.video,
				.image {
					width: 100%;
					gap: 12rpx;
					flex-wrap: wrap;
					#flex(-, space-between, center);

					&::after {
						display: block;
						content: "";
						flex: 1;
					}
				}

				.video {
					.videoChild {
						#box(-, 400rpx, 12rpx);
						width: calc((100% - 12rpx) / 2);
					}
				}


				.image {
					max-height: calc(100vw - 96rpx);

					.imageChild {
						width: calc((100vw - 120rpx) / 3);
						height: calc((100vw - 120rpx) / 3);

					}
				}



			}



		}



		.bottom {
			#padding(24rpx 0 0 0);
			#flex(-, space-between, center);

			.left {
				#flex(-, -, center);

				.del {
					color: #f40;
					margin-right: 24rpx;
				}

				.createTime {
					#font(28rpx, #999);
				}
			}

			.right {
				#font(26rpx, #999);


			}
		}


	}
</style>